<template>
	<view class="item">
		<navigator :url="'/pages/index/components/detail/index?id=' + data['id']">
			<view class="item-head">
				<view class="img">
					<image :src="data['author']['avatar_url']" mode="aspectFit" lazy-load="true"></image>
				</view>
				<view class="short">
					<text class="name">{{data['author']['loginname']}}</text>
					<text>{{fmDate(data['create_at'])}}</text>
				</view>
				<view class="top">
					<text>{{data['top'] ? 'top' : ''}}</text>
				</view>
			</view>
			<view class="item-content">{{data['title']}}</view>
			<view class="item-footer">
				<view class="icon">
					<uni-icons type="eye" size="20"></uni-icons> {{data['visit_count']}}
					<uni-icons type="chat" size="18"></uni-icons> {{data['reply_count']}}
				</view>
				<view class="new">最新动态：{{fmDate(data['last_reply_at'])}}</view>
			</view>
		</navigator>
	</view>
</template>
<script>
	import { formatDate } from "@/common/utils.js"
	export default {
		props: ["data"],
		methods: {
			fmDate (date){
				return formatDate(date)
			}
		}
	}
</script>
<style lang="scss">
	.item{
		margin-bottom: 10rpx;
		border: 1PX solid #ddd;
		border-top: none;
		background-color: #fff;
		navigator{
			padding: 0 15px;
		}
		.item-head{
			display: flex;
			padding: 20rpx 0 10rpx;
			.img{
				width: 50px;
			}
			.short{
				flex: 4;
				line-height: normal;
			}
			.top{
				flex: 1;
				text-align: right;
				font-size: 12px;
				text{
					display: inline-block;
					width: 30px;
					text-align: center;
					color: #fff;
					background: orangered;
					border-radius: 15px;
				}
			}
			image{
				width: 40px;
				height: 40px;
			}
			.name{
				display: block;
				font-size: 14px;
				color: $baseColor;
			}
			text{
				font-size: 12px;
				color: #999;
			}
		}
		.item-content{
			font-size: 15px;
			font-weight: bold;
			line-height: 1.2;
			color: #333;
		}
		/deep/ .item-footer{
			display: flex;
			justify-content: space-between;
			align-items: center;
			justify-items: center;
			padding: 20rpx 0 12rpx;
			color: #888;
			uni-icons,
			.uni-icons,
			text{
				color: #888!important;
			}
			.icon,
			.new{
				line-height: normal;
				font-size: 12px;
			}
		}
	}
</style>
